<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div滚动到顶部和底部</title>
		<style type="text/css">
			.scrolldiv{
				width: 500px;
				height: 400px;
				margin: 10px auto;
				background: #A6E1EC;
				overflow-y: scroll;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="testDiv" class="scrolldiv">
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
		</div>
		<script type="text/javascript">
			var divscroll = document.getElementById('testDiv');
			function dicScroll (){
				var wholeHeight  = divscroll.scrollHeight;//整个内容的高度
				var scrollTop = divscroll.scrollTop;//卷起的高度
				var divHeight = divscroll.clientHeight;//div的高度
				
				if(scrollTop + divHeight >= wholeHeight){
					alert('底部');
				}
				
				if(scrollTop == 0){
					alert('顶部');
				}
			}
			
			divscroll.onscroll = dicScroll;
		</script>
	</body>
</html>
